<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="apple-mobile-web-app-status-bar-style" content="blank">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>商品详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/goodsDetail.css">
    <link rel="stylesheet" href="./css/swiper-3.4.2.min.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/flexible_css.js"></script>
    <script src="js/flexible.js"></script>
  
     

    <style>
        .noEnough{
        width: 8rem;
        height: 4rem;
        background: #fff;
        position: absolute;
        top: calc(50% - 2rem);
        left: calc(50% - 4rem);
        z-index: 999999;
            text-align: center;
        }
        .noEnough h3{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            border-bottom: 1px solid #efefef;
        }
        .noEnough p {

            height: 2rem;
            font-size: .6rem;
            line-height: 2rem;
        }
        .noEnoughBtn{
            width: 100%;

        }
        .noEnoughBtn button{
            float: left;
            width: 50%;
            height: 1rem;
            text-align: center;
            border: none;

        }
    </style>

</head>
<body ontouchstart>

    <div class="wrap">
      
      <div class="goodsDetails">

        <div class="headImg">
            <img src="./images/commodity@2x.png" alt="不好意思图炸了">

        </div>
        <div class="goodsDetails-cont">
            <div class="title">
                商品详情
            </div>
            <div class="longImg">
                <img src="./images/empty@2x.png" alt="图裂了">
                <img src="./images/empty@2x.png" alt="图裂了">
                <img src="./images/empty@2x.png" alt="图裂了">
            </div>
        </div>

      </div>
      <div class="footer">
          <section>
              <p style="color: #666;padding-top: .133333rem;">总计:  <span style="color: #ff3737;" id="zPrice"> 368.12元</span></p>
              <p style="font-size: .293333rem;color: #999;" id="leaveMoney"> 账户余额: <span> 422</span>元 </p>
          </section>
          <section>
              <button id="btn01">立即购买</button>
              <button id="btn02" class="hide">立即付款</button>
          </section>
      </div>

      <div class="footer-box hide">
          <div class="footer-boxDes">
              <img src="./images/commodity@2x.png" alt="图裂了">
              <div class="nameANDprc">
                  <span>西班牙乐维红葡萄酒</span>
                  <p>￥368.12</p>
              </div>
          </div>
          <div class="footer-num">
              <h3>购买数量</h3>

              <div class="addANDminus">
                  <span id="minus">-</span>
                  <input type="number" value="1">
                  <span id="add">+</span>
              </div>
              <p class="maxText hide">亲，最大限额为20</p>
              <div class="quickNum">
                <span>5</span><span>10</span><span>15</span><span>20</span>
              </div>

              <div class="yunfei"> 运费: <span>首件计费11.00元，以后每件以此加2元</span></div>
          </div>
      </div>
    </div>
      
     <div class="screen hide"></div>
  
     <div class="actDialog hide">
        <div class="actDialog-cont">
            <section>
                <img src="./images/activity_choice_goldenedd_bg@2x.png" alt="砸金蛋">
                <a href="./zajindan.html" class="hide">
                    <img src="./images/activity_choice_button_bg@2x.png" alt="有">
                    <span>砸鸡蛋</span>
                </a>
                <a href="javascript:;" onclick="alert('抱歉，活动未开启 尝试其他活动')">
                    <img src="./images/activity_choice_button_no@2x.png" alt="无">
                </a>
            </section>
            <section>
                <img src="./images/activity_choice_star_bg@2x.png" alt="猜星星">
                <a href="./caixingxing.html">
                        <img src="./images/activity_choice_button_bg@2x.png" alt="有">
                        <span>猜星星</span>
                </a>
            </section>
            <section>
                <img src="./images/activity_choice_buy_bg@2x.png" alt="提货">
                <a href="./tihuo.html">
                        <img src="./images/activity_choice_button_bg@2x.png" alt="有">
                        <span>提货</span>
                </a>
            </section>
            <div class="close">
                <img src="./images/activity_choice_out@2x.png" alt="关闭">
            </div>
       </div>
     </div>

    <div class="noEnough hide">
        <h3>提示</h3>
        <p>您的余额不足</p>
        <div class="noEnoughBtn">
            <button id="toCancel">取消</button>
            <button id="toRecharge" style="background: greenyellow;"> 
                 <a style="display: inline-block;width: 100%;" href="./recharge.html">去充值</a>
            </button>
        </div>
    </div>
    
	<script src="js/swiper-3.4.2.min.js"></script>
   
   <script>
      
   $('#btn01').on('click',function () {

           //所需要的钱
           var zPrice= parseFloat( $('#zPrice').html()).toFixed(2);

           //剩余的钱
           var leaveMoney = parseFloat($('#leaveMoney').find('span').html()).toFixed(2);

           //差价
           var chajia = leaveMoney - zPrice;

          if (chajia >0){
            //   $('.screen').removeClass('hide');
            $('.screen').fadeIn();
            //   $(".footer-box").removeClass('hide');
            $(".footer-box").fadeIn();
              $(this).addClass('hide');
              $('#btn02').removeClass('hide')
          }else {

               // alert("鱼额不足，情趣充值")
              $('.noEnough').removeClass('hide');
            //   $('.screen').removeClass('hide')
            $('.screen').fadeIn();
          }

       document.body.style.overflow='hidden';
       document.body.style.height='100%';
       //手机端禁止滚动条 未测试
       $('.screen,.footer-box').on("touchmove",function(e){
           e.preventDefault();
       })

   });

   $('#btn02').on('click',function (e) {
       //所需要的钱
       var zPrice= parseFloat( $('#zPrice').html()).toFixed(2);
       console.log(zPrice)
       //剩余的钱
       var leaveMoney = parseFloat($('#leaveMoney').find('span').html()).toFixed(2);
       console.log(leaveMoney)
       //差价
       var chajia = leaveMoney - zPrice;
       console.log(chajia);
       if (chajia >0){
        //    $(".footer-box").addClass('hide');
        $(".footer-box").fadeOut();
        //    $('.screen').removeClass('hide');
        $('.screen').fadeIn();  
           $(".actDialog").toggle('hide');        
           // $(this).addClass('hide');
           // $('#btn01').removeClass('hide')
       }else if(isNaN(chajia)){
            alert('输入的数量为空')
       }else {
        //    $(".footer-box").addClass('hide');
        $(".footer-box").fadeOut();
           // alert("鱼额不足，情趣充值")
           $('.noEnough').removeClass('hide');
        //    $('.screen').removeClass('hide')
        $('.screen').fadeIn();
       }
       document.body.style.overflow='hidden';
       document.body.style.height='100%';
       //手机端禁止滚动条 未测试
       $('.screen,.actDialog').on("touchmove",function(e){
           e.preventDefault();
       })

       e.stopPropagation();
   });

   $('.close').on('click',function () {
       $('.actDialog').toggle('hide')
       $('#btn02').addClass('hide')
       $('#btn01').removeClass('hide')
    //    $('.screen').addClass('hide')
       $('.screen').fadeOut();
       document.body.style.overflow='scroll';
       //手机端解除禁止滚动条 未测试
       $('.screen,.footer-box,.actDialog').off('touchmove')
   });
   $('#toCancel').on('click',function () {
       $('.noEnough').addClass('hide');
    //    $('.screen').removeClass('hide');
       $('.screen').fadeIn();
       document.body.style.overflow='scroll';
       //手机端解除禁止滚动条 未测试
       $('.screen,.footer-box,.actDialog').off('touchmove');
    //    $(".footer-box").removeClass('hide');
       $('.footer-box').fadeIn();
   })


     //点击快捷数量span
     $('.quickNum span').on('click',function(){        
         $(this).addClass('active02').siblings('span').removeClass('active02');
         var inputVal =  parseInt($(this).html());
         $("input[type='number']").val(inputVal);
         zprice(inputVal);
         $('.maxText').addClass('hide')
     })
     // 点击加好触发事件
     $('#add').on('click',function(){
        var inputVal = parseInt($("input[type='number']").val());
        inputVal = inputVal +1;
        if(inputVal > 20 ){
           $('.maxText').removeClass('hide');
            return;
        }else{
            $('.maxText').addClass('hide')
        }
        $("input[type='number']").val(inputVal);
        zprice(inputVal);
        // console.log(zprice(inputVal));
        
     })
     //点击减号触发事件
     $('#minus').on('click',function(){
        var inputVal = parseInt($("input[type='number']").val());
        inputVal = inputVal -1;
       if(inputVal != 20){
            $('.maxText').addClass('hide');
        }
        if(inputVal < 1){
            return;
        }
        $("input[type='number']").val(inputVal);
        zprice(inputVal);
         // console.log(zprice(inputVal));
     })
     // input框输入事件
     $("input[type='number']").on('keyup',function(){
        //  console.log(43646)
         var inputVal = parseInt($("input[type='number']").val());
         if(inputVal <= 20){
            $('.maxText').addClass('hide');
        }
        if(inputVal > 20){
            $('.maxText').removeClass('hide');
            $("input[type='number']").val(20)
        }
        if(inputVal < 1){
            $("input[type='number']").val(1)
            inputVal = 1 
        }
         zprice(inputVal);
         $('.quickNum span').removeClass('active02')
     })
     
     
     //计算总价 不知道有没有bug
     function zprice(q){
         var length = $('.nameANDprc').find('p').html().length;
        //  console.log(length)
         var perPrice = $('.nameANDprc').find('p').html().substring(1,length)
        //  console.log(perPrice)
         var zPrice = (q * perPrice).toFixed(2);

         $('#zPrice').html(zPrice)
         return {zPrice:zPrice,
                 perPrice:perPrice
                 }
     }
   </script>
</body>
</html>
